<template>
  <div>
    <el-form
      :inline="true"
      :model="formData"
      size="small"
      class="demo-form-inline"
    >
      <el-form-item prop="nickName" label="用户名">
        <el-input
          v-model="formData.nickName"
          clearable
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="手机号码">
        <el-input
          v-model="formData.mobile"
          clearable
          placeholder="手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="headPic" label="头像" width="60">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.headPic"
            fit="cover"
            style="width: 40px; height: 40px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" width="180">
      </el-table-column>
      <el-table-column prop="otayonii" label="金豆" width="80">
      </el-table-column>
      <el-table-column prop="coin" label="元宝" width="80"> </el-table-column>
      <el-table-column prop="level" label="等级" width="100">
        <template slot-scope="scope">
          {{ scope.row.level | formatLevel }}
        </template>
      </el-table-column>
      <el-table-column prop="auditedFlag" label="是否认证" width="100">
        <template slot-scope="scope">
          {{ scope.row.auditedFlag === 0 ? "待提交" : "通过" }}
        </template>
      </el-table-column>
      <el-table-column prop="isLock" label="锁定" width="90">
        <template slot-scope="scope">
          {{ scope.row.isLock === 0 ? "正常" : "已锁定" }}
        </template>
      </el-table-column>
      <el-table-column prop="isLock" label="锁定原因" width="90">
        <template slot-scope="scope">
          <el-button
            type="info"
            icon="el-icon-message"
            size="mini"
            circle
            v-if="scope.row.isLock === 1"
            @click="$refs.user.show(scope.row.userSn)"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="regTime" label="注册时间" width="180">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.isLock === 0"
            type="danger"
            size="mini"
            @click="clickLocking(scope.row.userSn, 1)"
            >锁定</el-button
          >
          <el-button
            v-else
            type="success"
            size="mini"
            @click="clickIsLock(scope.row.userSn, 0)"
            >解锁</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <v-pagination :formData="formData" @load="getData"></v-pagination>
    <user-modal ref="user"></user-modal>
  </div>
</template>
<script>
import { userList, userlock } from "@/api/userList";
import pagination from "@/components/pagination";
import userModal from "./modules/userModal";
export default {
  components: {
    vPagination: pagination,
    userModal,
  },
  data() {
    return {
      formData: {
        mobile: "",
        nickName: "",
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      loading: true,
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  filters: {
    formatLevel(Level) {
      switch (Level) {
        case 1:
          return "VPI会员";
          break;
        case 2:
          return "城市盟主";
          break;
        default:
          return "普通会员";
          break;
      }
    },
  },
  methods: {
    getData() {
      this.loading = true;
      userList(this.formData).then((res) => {
        this.loading = false;
        this.tableData = res.data.resultData.list;
        this.formData.total = res.data.resultData.count;
      });
    },
    onSubmit(formName) {
      this.formData.pageNo = 1;
      this.formData.pageSize = 10;
      this.formData.total = 0;
      this.getData();
    },
    clickLocking(userSn, isLock) {
      this.$prompt("锁定原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            if (!instance.inputValue) {
              this.$message({
                type: "warning",
                message: "请输入锁定原因",
              });
            } else {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "锁定中...";
              userlock({
                mgrSn: this.$store.getters.mgrSn,
                userSn: userSn,
                isLock: isLock,
                desc: instance.inputValue,
              }).then((res) => {
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
                if (res.data.resultStatus) {
                  done();
                  this.$message.success(res.data.errorMessage);
                  this.getData();
                } else {
                  this.$message.error(res.data.errorMessage);
                }
              });
            }
          } else {
            done();
          }
        },
      }).catch(() => {});
    },
    clickIsLock(userSn, isLock) {
      this.$confirm("是否解锁该用户？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userlock({
            mgrSn: this.$store.getters.mgrSn,
            userSn: userSn,
            isLock: isLock,
            desc: "测试",
          }).then((res) => {
            if (res.data.resultStatus) {
              this.$message.success(res.data.errorMessage);
              this.getData();
            } else {
              this.$message.error(res.data.errorMessage);
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>